<template>
	<view class="container">
		<u-sticky>
			<view class="tabs_box">
				<!-- 搜索栏优化：增加圆角、调整间距 -->
				<view class="tabs_box_search">
					<u-search :showAction="true" actionText="搜索" :animation="true" v-model="query.projectName"
						placeholder="请输入项目名称" @custom="getList(false)" @search="getList(false)" @clear="getList(false)"
						borderRadius="16rpx"></u-search>
				</view>
			</view>
		</u-sticky>

		<!-- 列表卡片优化：增加阴影、圆角、内边距 -->
		<view class="list_box">
			<view class="list_card" v-for="item in list" :key="item.projectId" @click="handleProject(item)">
				{{item.projectName}}
			</view>
			
			
		</view>
		<u-empty mode="list" style="padding-top: 100rpx;" text="暂无数据" v-if="!list.length">
		</u-empty>
	</view>
</template>

<script>
	import {
		projectList,
		getDicts
	} from "@/common/api.js"
	import dictsTag from "@/components/dictsTag.vue"
	import bottomButton from "@/components/bottomButton.vue"
	import dicts from '@/mixins/dicts.js'
	import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
	export default {
		mixins: [dicts],
		components: {
			dictsTag,
			bottomButton
		},
		data() {
			return {
				checkType: 'radio',
				pageType: '1', // 1 跳转  2 返回
				query: {
					__page: 1,
					__limit: 10,
					projectName: '',
				},
				loading: false,
				total: 0,
				list: [],
				currentIndex: 0,
				dictList: {},
				checkData: [],
			}
		},
		onLoad(e) {

		},
		onShow() {
			this.getList()
		},
		methods: {
			// 映射模块的mutations
			...mapMutations('problemInfo', ['SET_PROJECT_INFO',]),
			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data
				}
			},
			async getList(isRefresh = false) {

				let res = await projectList({
					...this.query,
				})
				if (res && res.data) {
					this.list = res.data || []
				}
			},

			handleConfirm(e) {
				this.getList()
			},

			handleProject(item) {
				this.SET_PROJECT_INFO(item)
				this.$commonFn.Navto(`/pages/product/index?pageType=1`)

			},
		}
	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 32rpx;
		background-color: #f5f7fa; // 页面背景色，增强层次感
	}

	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}
	.list_box{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;
		// margin-top: 32rpx;
		padding: 32rpx;
	}
	// 列表卡片样式
	.list_card {
		text-align: center;
		font-size: 28rpx;
		
		padding: 24rpx;
		background-color: #ddf0fb;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;

		&_check {
			// width: 48rpx;
			// height: 48rpx;
			padding-right: 16rpx;
		}

		
	}

	// 按钮样式
	.list_btn {
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	// 按钮 hover 效果
	.btn_hover {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.2s ease;
	}

	// 覆盖 u-button 样式，保证宽度和高度一致性
	.list_btn ::v-deep .u-button {
		width: 160rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		border-radius: 8rpx;
	}
</style>